<template>
  <div class="home-page">
    <!-- 筛选条件 -->
    <Menu @conditionalChange="conditionalChange"/>
    <!-- 书籍主体 -->
    <Content :bookData="bookData"/>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageObj.total"
        :current-page="pageObj.pageNo"
        @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Menu from './components/menu/index'
import Content from './components/content/index'
import {api} from './api'

export default {
  components: {
    Menu,
    Content
  },
  data () {
    return {
      form: {},
      pageObj: {
        pageNo: 1,
        pageSize: 8,
        total: 0
      },
      bookData: []
    }
  },
  methods: {
    /*
     *@Description: 获取书籍详情
     *@Author:  lupan
     *@Date: 2019-06-30 10:08:17
    */
    getCategoryDetail () {
      let params = Object.assign(this.form, {
        start: this.pageObj.pageNo,
        limit: this.pageObj.pageSize
      })
      this.$fetch(api.categoryDetail, params).then(res => {
        this.bookData = res.books
        this.pageObj.total = res.total
      })
    },
    /*
     *@Description: 顶部条件改变
     *@Author:  lupan
     *@Date: 2019-06-30 10:15:31
    */
    conditionalChange (obj) {
      if (obj) {
        this.form = obj
        this.pageObj.pageNo = 1
      }
      this.$fetch(api.categoryDetail, Object.assign(this.form, {
        start: this.pageObj.pageNo,
        limit: this.pageObj.pageSize
      })).then(res => {
        this.pageObj.total = res.total
        this.bookData = res.books
      })
    },
    currentChange (el) {
      this.pageObj.pageNo = el
      this.conditionalChange()
    }
  }
}
</script>

<style lang="scss">
.home-page {
  padding: 50px;
  .page-container {
    text-align: center;
    margin: 50px auto;
  }
}
</style>
